
var selector ; 

function createDropDownSelector(option)
{
	selector={
			//输入框的id
			inputId : option.inputId,
			
			//选中的节点
			selectedNode : null,
			
			//默认的展开节点
			defaultExpendNodeId : option.defaultOpen ? option.defaultOpen : "",
			
			//如果没有设置宽度,则默认为180宽
			width : option.width ? option.width : 180,
			
			//如果没有设置高度,则默认为300高		
			height : option.height ? option.height : 300,
			
			//拼凑div的Id
			contentId : option.inputId + "_selector_div",
			
			//拼凑zTree的Id
			zTreeId : option.inputId + "_selector_tree",
			
			//点击选完节点之后的回调函数
			clickedCallback : option.clickedCallback,
			
			zTree : null,
			
			self  : this,
			
			init : function(){
				//拼接要显示的div的样式
				var html = "<div id='" + this.contentId + "' " 
						 + "class='" + this.contentId + "' "
						 + "style='position:absolute;margin-top 0;display:none;z-index:10000'>"
						 + "<ul id='" + this.zTreeId + "' "
						 + "class='ztree' "
						 + "style='position:absolute;margin-top 0; "
						 + "width:" + this.width + "px; "
						 + "height:" + this.height + "px;' "
						 + "></ul></div>";
				
				//把拼接完的html代码加入到body里面
				$("body").append(html);
				
				this.initZtree();
			},
			
			initZtree : function(){
				var setting = {
						async:{
							//使用异步加载模式
							enable: true,
							dateType:"json",
							url:option.url,
							autoParam:["id=parentId"],
							otherParam:[]
						},
						view: {
							dblClickExpand: true,	//双击自动展开
							showLine: true,			//是否显示连接线
							selectedMulti: false,	//是否支持多选
							expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
						},
	
						data: {
							simpleData: {
								enable:true,
								idKey: "id",
								pIdKey: "pId",
								rootPId: ""
							}
						},
						callback:{
							onClick: onNodeClick,
							onAsyncSuccess: function(event,treeId,treeNode,msg){
								expandNode();
							}
						}
					};
					this.zTree=$.fn.zTree.init($("#"+this.zTreeId), setting);
				},
				
				show : function(){
					var inputObj = $("#" + this.inputId);
					var _offset = inputObj.offset();
					//top 和 left是相对于窗口的最左边点的坐标，要显示的div的最左边的坐标的left值就是文本框的left值,top值则要加上文本框的高度才是
					//为div显示加上一个动画效果
					$("#" + this.contentId).css({left : _offset.left + "px",top : _offset.top + (inputObj.height() - 2.5) + "px"}).slideDown("fast");
					
					//为页面的body设置鼠标事件，点击鼠标的时候应该要把div隐藏
					$("body").bind("mousedown",onBodyKeyDown);
				},
				
				hide : function(){
					
					$("#" + this.contentId).hide();
					$("body").unbind("mousedown");
				}
		};
	
		selector.init();
		$("#" + option.inputId).click(function(){
			
			selector.show();
			
		});
		
		return selector;
}

function expandNode()
{
	selector.zTree.expandAll(false);
}

function onNodeClick(event,treeId,treeNode)
{
	//选择节点之后,把选中的节点的name值赋给文本框
	$("#" + selector.inputId).val(treeNode.name);
	
	selector.selectedNode = treeNode;
	//隐藏div
	selector.hide();
	
	//如果有点击的回调函数,则调用此回调函数并把选中的节点作为参数传递过去
	if(selector.clickedCallback)
	{
		selector.clickedCallback(treeNode);
	}
	
}


function onBodyKeyDown(event)
{
	//三种情况都符合的情况下隐藏div,第一种是点击的元素不是文本框,第二种是点击的元素不是div,第三种是点击的元素不是div的子元素
	if((event.target.id != selector.inputId) && (event.target.id != selector.contentId) && $(event.target).parents("#" + selector.contentId).length == 0)
	{
		selector.hide();
	}
}




